<template>
  <div class="page">
    <div class="form-card">
      <el-form :inline="true" :model="queryForm" class="demo-form-inline">
        <el-form-item label="参数编码">
          <el-input v-model="queryForm.code" placeholder="请输入参数编码" clearable />
        </el-form-item>
        <el-form-item label="参数名称">
          <el-input v-model="queryForm.name" placeholder="请输入参数名称" clearable />
        </el-form-item>
        <el-form-item label="设备类型">
          <el-select v-model="queryForm.deviceType" placeholder="请输入设备类型" clearable style="width: 200px">
            <el-option v-for="dict in sys_device_type" :key="dict.value" :label="dict.label" :value="dict.value" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleQuery">搜索</el-button>
          <el-button icon="Refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="table-box">
      <div class=" mt20 mb20">
        <el-button type="primary" icon="Plus" @click="handleDialog('add')">新增</el-button>
      </div>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="code" label="参数编码" align="center" show-overflow-tooltip />
        <el-table-column prop="name" label="参数名称" align="center" show-overflow-tooltip />
        <el-table-column prop="unit" label="单位" align="center" show-overflow-tooltip
          :formatter="(row, column) => proxy.selectDictLabel(sys_unit, row.unit)" />
        <el-table-column prop="deviceType" label="设备类型" align="center" show-overflow-tooltip>
          <template #default="scope">
            <dict-tag :options="sys_device_type" :value="scope.row.deviceType" />
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="180" align="center" show-overflow-tooltip>
          <template #default="scope">
            <el-button link type="primary" icon="Edit" @click="handleEdit(scope.row.id)">
              修改
            </el-button>

            <el-button link type="primary" icon="Delete" @click="handleDel(scope.row)">
              删除
            </el-button>
          </template>

        </el-table-column>
      </el-table>
      <pagination v-show="pageTotal > 0" :total="pageTotal" v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize" @pagination="getList" />
    </div>
    <el-dialog v-model="dialogVisible" :title="dialogTitle" width="500">
      <el-form ref="formRef" :model="form" :rules="rules" label-width="auto">
        <el-form-item label="参数编码" prop="code">
          <el-input v-model="form.code" placeholder="请输入参数编码" clearable />
        </el-form-item>
        <el-form-item label="参数名称" prop="name">
          <el-input v-model="form.name" placeholder="请输入参数名称" clearable />
        </el-form-item>
        <el-form-item label="单位" prop="unit">
          <el-select v-model="form.unit" placeholder="请输入设备类型" clearable style="width: 100%">
            <el-option v-for="dict in sys_unit" :key="dict.value" :label="dict.label" :value="dict.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="设备类型" prop="deviceType">
          <el-select v-model="form.deviceType" placeholder="请输入设备类型" clearable style="width: 100%">
            <el-option v-for="dict in sys_device_type" :key="dict.value" :label="dict.label" :value="dict.value" />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="handleClose">取消</el-button>
          <el-button type="primary" @click="handleOk">
            确认
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="collect">
import { listTemplate, addTemplate, getTempById, putTemplate, delTempById } from '@/api/modelConfiguration/collectIndicator.js'
import { reactive, ref } from 'vue';
import { Delete, Edit, Search, Share, Upload } from '@element-plus/icons-vue'
const { proxy } = getCurrentInstance();
const { sys_device_type } = proxy.useDict("sys_device_type");
const { sys_unit } = proxy.useDict("sys_unit");



let queryParams = ref({
  pageNum: 1,
  pageSize: 10,
})
let pageTotal = ref(0)
let dialogVisible = ref(false)
let dialogTitle = ref('')

let queryForm = ref({})
let form = ref({})
let tableData = ref([])
const rules = {
  code: [{ required: true, message: '请输入', trigger: 'blur' },],
  name: [{ required: true, message: '请输入', trigger: 'blur' },],
  unit: [{ required: true, message: '请选择', trigger: 'change' },],
  deviceType: [{ required: true, message: '请选择', trigger: 'change' },],
}

function handleQuery() {
  queryParams.value.pageNum = 1
  getList()
}


function resetQuery() {
  queryForm.value = {}
  queryParams.value.pageNum = 1
  getList()
}
function handleEdit(id) {
  getTempById({ id }).then(res => {
    if (res.code == 200) {
      handleDialog()
      form.value = JSON.parse(JSON.stringify(res.data))
    }
  })
}

function handleDel(row) {
  proxy.$modal.confirm('是否确认删除指标名为"' + row.name + '"的数据项?', '警告', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    return delTempById(row.id)
  }).then(() => {
    getList()
    proxy.$modal.msgSuccess('删除成功')
  }).catch(function () {
  })

}

function getList() {
  let params = {
    ...queryParams.value,
    ...queryForm.value
  }
  listTemplate(params).then(res => {
    tableData.value = res.rows;
    pageTotal.value = res.total
  });
}

function handleDialog(type) {
  if (type == 'add') {
    dialogTitle = '新增采集参数模版'
  } else {
    dialogTitle = '修改采集参数模版'
  }
  dialogVisible.value = true
}

function handleOk() {
  proxy.$refs.formRef.validate(valid => {
    console.log('valid===>', valid);
    if (valid) {
      if (form.value.id) {
        putTemplate(form.value).then(res => {
          proxy.$modal.msgSuccess(res.msg)
          dialogVisible.value = false
          getList()
        })
      } else {
        addTemplate(form.value).then(res => {
          console.log('res===>新增', res);
          proxy.$modal.msgSuccess(res.msg)
          dialogVisible.value = false
          getList()
        })
      }

    }
  })

}

function handleClose() {
  form.value = {}
  proxy.$refs.formRef.resetFields()
  dialogVisible.value = false
}

getList()

</script>

<style lang="scss" scoped>
@import "@/assets/styles/page.scss";
</style>
